import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Card, Spin, Radio } from 'antd';
// import moment from 'moment';
// import api from '../../utils/api';
import echarts from 'echarts';
import BreadcrumbCustom from '../../components/BreadcrumbCustom';
import './style/css/statistics.less';

class Statistics extends Component {
  constructor(props) {
    super(props);
    this.state = {
      radioValue: 'year',
      showLoading: false,
      showChars: true,
      option: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:['邮件营销','联盟广告']
        },
        grid: {
          left: '5%',
          right: '20%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
          },
          {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }
    };
  }

  componentDidMount() {
    const { option } = this.state;
    const myChart = echarts.init(document.getElementById('Canvas-box'));
    myChart.setOption(option);
  }

  radioChange = (e) => {
    this.setState({
      radioValue: e.target.value
    });
  }

  render() {
    const { radioValue, showLoading, showChars } = this.state;
    return (
      <Fragment>
        <BreadcrumbCustom first="统计分析" second="图表分析" />
        <div className="statistics-content">
          <div className="statistics-content-header">
            <Card>
              <Radio.Group onChange={this.radioChange} defaultValue={radioValue}>
                <Radio.Button value="year">年</Radio.Button>
                <Radio.Button value="month">月</Radio.Button>
                <Radio.Button value="week">周</Radio.Button>
                <Radio.Button value="day">日</Radio.Button>
              </Radio.Group>
            </Card>
          </div>
          <div className="statistics-content-main">
            { showLoading ? <Spin /> : null }
            { showChars ? <div id="Canvas-box" /> : <div className="ant-table-placeholder">暂无数据</div> }
          </div>
        </div>
      </Fragment>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(
    {},
    dispatch,
  ),
});

export default connect(mapStateToProps, mapDispatchToProps)(Statistics);
